<template>
    <div class="login-container">
      <!--登录面板内容部分-->
      <div class="login-inner">
        <!--登录面板头部-->
        <div class="login-header">
          <div class="login-logo">
            <img src="./images/lk_logo_sm.png" alt="" width="250">
          </div>
          <!--头部标题-->
          <div class="login-header-title">
            <a href="javascript:;" :class="{'current': loginMode}" @click="dealLoginMode(true)">验证码登录</a>
            <a href="javascript:;" :class="{'current': !loginMode}" @click="dealLoginMode(false)">密码登录</a>
          </div>
        </div>
        <!--面板表单部分-->
        <div class="login-content">
          <form>
            <!--手机验证码登录部分-->
            <div :class="{'current': loginMode}">
              <section class="login-message">
                <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
                <button v-if="!countDown" class="get-verification" :class="{phone_right:phoneRight}" @click.prevent="getVerifyCode()">获取验证码</button>
                <button v-else disabled="disabled" class="get-verification">已发送({{countDown}}s)</button>
              </section>
              <section class="login-verification">
                <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
              </section>
              <section class="login-hint">
                温馨提示：未注册撩课帐号的手机号，登录时将自动注册，且代表已同意
                <a href="javascript:;">服务协议与隐私政策</a>
              </section>
            </div>
            <!--账号登录部分-->
            <div :class="{'current': !loginMode}">
              <section>
                <section class="login-message">
                  <input type="text" maxlength="11" placeholder="用户名/手机/邮箱" v-model="user_name">
                </section>
                <section class="login-verification">
                  <input type="password" maxlength="18" placeholder="密码" v-if="pwdMode" v-model="password">
                  <input type="text" maxlength="18" placeholder="密码" v-else v-model="password">
                  <div class="switch-show">
                    <img :class="{on: pwdMode}" src="./images/hide_pwd.png" alt="" width="20" @click.prevent="dealPwdMode(false)">
                    <img :class="{on: !pwdMode}" src="./images/show_pwd.png" alt="" width="20" @click.prevent="dealPwdMode(true)">
                  </div>
                </section>
                <section class="login_message">
                  <input type="text" maxlength="11" placeholder="验证码" class="login-verification" v-model="captcha">
                  <img ref="captcha" src="http://localhost:5678/api/captcha" alt="验证码加载失败" class="get_verification" @click.prevent="handleImgClick()">
                </section>
              </section>
            </div>

            <button class="login-submit" @click.prevent="login()">登录</button>
          </form>
          <button class="login-back">返回</button>
        </div>
      </div>
    </div>
</template>

<script>
    import {getPhoneCode,phoneCodeLogin,login} from '../../api/index';
    // 按需加载
    import { Toast } from 'mint-ui'
    import {mapActions} from 'vuex'
    export default {
        name: 'Login',
        data(){
          return {
            loginMode: true,  // 登录方式  true-验证码登录  false-账号密码登录
            phone: '',   // 手机号码
            countDown: 0, // 倒计时
            pwdMode: true, // 密码显示方式  true-密文  false-明文
            password: '',  // 密码
            code:'',  // 验证码
            user_info: {}, // 用户信息,
            user_name: '', // 用户名
            captcha: '',  //图形验证码
          }
        },
        computed:{
          // 用来校验手机号码是否正确。分为深校验(验证手机号码是否可以)和浅校验(仅仅校验手机号码格式)
          phoneRight(){
            // 浅校验常用的方式就是正则
            return /^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone);
          }
        },
        methods:{
          // 通过延展操作符拿到actions方法集合
          ...mapActions(['syncUserInfo']),
          // 登录模式
          dealLoginMode(flag){
            this.loginMode = flag;
          },
          // 密码显示方式
          dealPwdMode(flag){
            this.pwdMode = flag;
          },
          // 获取验证码
         async getVerifyCode(){
            // 开启倒计时
            if(this.phoneRight){
              this.countDown = 60;
              this.intervalId = setInterval(()=>{
                this.countDown--;
                if(this.countDown === 0){
                  clearInterval(this.intervalId);
                }
              },1000)
            }
            // 调用后台接口获取验证码。由于验证码是实时的东西，不需要数据持久化，所以不用使用vuex管理
            let result = await getPhoneCode(this.phone);
            // 获取验证码失败，通过弹窗的方式给用户提示,并做其他处理
           if(result.success_code === 0){
              Toast({
                message: result.message,
                position: 'center',
                duration: 2000
              });
             // 其他处理,实际的业务场景并不需求解除倒计时，因为短信是收费的，不能一失败就让用户发送，至少让他等等。
             clearInterval(this.intervalId);
             this.countDown = 0;
             return;
           }
           console.log(result.message);
          },
          // 获取图片验证码
          handleImgClick(){
            this.$refs.captcha.src = 'http://localhost:5678/api/captcha?time='+ new Date();
          },
          // 登录按钮
          async login(){
            // 判断是登录的模式
            if(this.loginMode){// 验证码登录
              // 前台校验
              if(!this.phone){
                Toast('请输入手机号码！');
                return;
              }else if(!this.phoneRight){
                Toast('手机号码格式不正确');
                return;
              }
              if(!this.code){
                Toast('请输入验证码！');
                return;
              }else if(!(/^\d{6}$/.test(this.code))){
                Toast('请输入正确的验证码！');
                return;
              }
              let result = await phoneCodeLogin(this.phone,this.code);
              /*
              *   登录业务的处理：1.成功跳转到个人中心，并且登录成功后的用户信息在其他界面也有可能使用到，所以用户信息数据要做到全局存储；
              *                   2.登录失败
              * */
              if(result.success_code === 200){
                this.user_info = result.message;
              }else {
                this.user_info = {
                  message:'登录失败，手机号或验证码不正确！'
                }
              }
              console.log(result);
            }else {// 账号密码登录
              // 前端校验
              if(!this.user_name){
                Toast('账户名不能为空');
                return;
              }
              if(!this.password){
                Toast('密码不能为空');
                return;
              }
              if(!this.captcha){
                Toast('验证码不能为空');
                return;
              }
              // 将参数发送到后端接口，进行后端校验
              let result = await login(this.user_name,this.password,this.captcha);
              if(result.success_code === 200){
                this.user_info = result.message;
              }else {
                this.user_info = {
                  message:'登录失败，用户名或密码不正确！'
                }
              }
            }

            // 登录成功或失败的情况统一处理(包括手机号和验证码)
            if(!this.user_info.id){
              Toast(this.user_info.message);
            }else {
              // 通过action和mution同步用户数据到vuex中
              this.syncUserInfo(this.user_info);
              // 回到个人中心界面
              this.$router.back();
            }
          }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl"
  .login-container
    width 100%
    height 100%
    background #fff
    .login-inner
      padding-top 60px
      width 80%
      margin 0 auto
      .login-header
        .login-logo
          font-size 40px
          font-weight bold
          color mediumpurple
          text-align center
        .login-header-title
          padding-top 40px
          padding-bottom 10px
          text-align center
          > a
            color #333
            font-size 14px
            padding-bottom 4px
            &:first-child
              margin-right 40px
            &.current
              color mediumpurple
              font-weight 700
              border-bottom 2px solid mediumpurple
      .login-content
        > form
          > div
            display none
            &.current
              display block
            input
              width 100%
              height 100%
              padding-left 8px
              box-sizing border-box
              border 1px solid #ddd
              border-radius 4px
              outline 0
              font 400 14px Arial
              &:focus
                border 1px solid mediumpurple
            .login-message
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .get-verification
                position absolute
                top 50%
                right 10px
                transform translateY(-50%)
                border 0
                color #ccc
                font-size 14px
                background transparent
                &.phone_right
                  color purple
            .login-verification
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .switch-show
                position absolute
                right 10px
                top 12px
                img
                  display none
                img.on
                  display block
            .login-hint
              margin-top 12px
              color #999
              font-size 12px
              line-height 20px
              > a
                color mediumpurple
          .login-submit
            display block
            width 100%
            height 42px
            margin-top 30px
            border-radius 4px
            background mediumpurple
            color #fff
            text-align center
            font-size 16px
            line-height 42px
            border 0
        .login-back
          display block
          width 100%
          height 42px
          margin-top 15px
          border-radius 4px
          background transparent
          border: 1px solid mediumpurple
          color mediumpurple
          text-align center
          font-size 16px
          line-height 42px
</style>
